<template>
  <el-row style="margin-top: 20px">
    <el-col :span="4" style="text-align:center">
      <div>
        <el-avatar :size="100" :src="getUserAvatar" />
      </div>
      <div style="margin-top: 20px">{{getUsername}}</div>
      <div style="margin-top: 20px">{{user.brief}}</div>
    </el-col>
    <el-col :span="20">
      <WGInfoCard/>
    </el-col>
  </el-row>
</template>

<script setup>
  import { reactive } from 'vue'
  
  import userStore from '../store/user.js'
  import {storeToRefs} from 'pinia'
  
  import WGInfoCard from '../components/WGInfoCard.vue'
  
  import { useRoute } from "vue-router"
  // 获取wg的id
  const router = useRoute()
  const wgId = router.params.id
  
  // 设置wgId
  import wgStore from '../store/wg.js'
  
  const wStore = wgStore()
  wStore.updateWgId(wgId)
  
  const appObject = reactive({
    wg: {}
  })
  
  
  const uStore = userStore()
  const { user,getUsername, getUserAvatar } = storeToRefs(uStore)
  
  
</script>

<style scoped>
</style>